<script setup lang='ts'>
import { ref, onMounted } from "vue"
import LoadingPage from "@/components/LoadingPage.vue"
import LoadingView from "@/components/LoadingView.vue"
import BookViewFirst from "@/components/BookViewFirst.vue"
import { getBookFreeInfo } from "@/api/index"
import { getBookChapterList } from "@/api/index"
import { useRouter } from 'vue-router'

import { useCounterStore } from '../stores/counter'
const store = useCounterStore()
const $router = useRouter()
const isLoading = ref<boolean>(true)
const isLoadingView = ref<boolean>(false)

const bookFreeInfo = ref<any>()

onMounted(async () => {
    let res = await getBookFreeInfo($router.currentRoute.value.query.uuid);
    bookFreeInfo.value = res.data.data.list
    isLoading.value = false
})

const toBookContent = async (book: any) => {
    isLoadingView.value = true
    let bookChapterRes = await getBookChapterList(book.id)

    store.getChapter(bookChapterRes.data.data.catalog)
    isLoadingView.value = false
    $router.push({
        path: '/content', query: {
            source_uuid: bookChapterRes.data.data.book.sourceUuid, content_uuid: bookChapterRes.data.data.catalog[0].uuid, title: book.title, index: 0
        }
    })
}
</script>

<template>
    <!-- <div> -->
    <LoadingView v-if="isLoadingView" />
    <div class="free" v-else>
        <LoadingPage v-if="isLoading" />
        <div class="free-content" v-if="bookFreeInfo && !isLoading">
            <div class="free-limit">
                <h3>{{ bookFreeInfo[0]?.name }}</h3>
                <ul class="list">
                    <li v-for="item, index in bookFreeInfo[0].list" :key="index" @click="toBookContent(item)">
                        <img :src="item.cover + '?imageView&thumbnail=240y336'" alt="">
                        <p>{{ item.title }}</p>
                        <span>{{ item.nwprice }}阅点/千字</span>
                        <span>{{ item.discountDesc }}</span>
                    </li>
                </ul>
            </div>
            <div class="good-book">
                <h3>{{ bookFreeInfo[1].name }}</h3>
                <ul class="list">
                    <li v-for="item, index in bookFreeInfo[1].list" :key="index" @click="toBookContent(item)">
                        <div class="book-img">
                            <img :src="item.cover" alt="">
                        </div>
                        <div class="book-msg">
                            <h3>{{ item.title }}</h3>
                            <p>{{ item.recomContent || item.content }}</p>
                            <div class="author">
                                <span>{{ item.author }}/{{
                                    item.category
                                }}</span>

                                <span>立即阅读 ></span>
                            </div>

                        </div>
                    </li>
                </ul>
            </div>
            <div class="you-like" v-if="bookFreeInfo[2]">
                <h3>{{ bookFreeInfo[2].name }}</h3>
                <BookViewFirst v-for="book in bookFreeInfo[2].list" :key="book.id" :bookinfo="book"
                    @click="toBookContent(book)" />
            </div>
            <div class=" bottom">
                <p>我是有底线的</p>
            </div>
        </div>
    </div>
    <!-- </div> -->
</template>

<style lang="less" scoped>
.free {
    width: 100%;
    height: 100%;

    .free-content {
        .free-limit {
            padding: 10rem 0;
            border-bottom: 1px solid #eee;

            h3 {
                font-size: 17rem;
                margin-bottom: 10rem;
            }

            ul.list {
                width: 100%;
                display: flex;
                justify-content: space-between;

                li {
                    width: 30%;
                    display: flex;
                    flex-direction: column;

                    img {
                        width: 100%;
                        height: 145rem;
                    }

                    p {

                        display: -webkit-box;
                        -webkit-box-orient: vertical; //从上到下垂直排列子元素(设置伸缩盒子的子元素的排列方式)
                        text-overflow: ellipsis; //溢出用省略号显示
                        overflow: hidden; //超出的文本隐藏
                        -webkit-line-clamp: 2; //表明3行文本显示省略号,这里要根据自身需求进行设置
                    }

                    span {
                        &:nth-child(3) {
                            text-decoration: line-through;
                        }

                        &:nth-child(4) {
                            color: #fc1c1c;
                        }
                    }
                }
            }
        }

        .good-book {
            padding: 20rem 0 10rem;
            border-bottom: 1px solid #eee;

            h3 {
                margin-bottom: 10rem;
            }

            ul.list {

                li {
                    width: 100%;
                    height: 120rem;
                    display: flex;
                    justify-content: left;
                    align-items: center;
                    margin-bottom: 20rem;

                    .book-img {
                        margin-right: 10rem;
                        font-size: 0;

                        img {
                            width: 90rem;
                            box-shadow: 1rem 1rem 4rem 3rem #eee;
                        }
                    }

                    .book-msg {
                        height: 120rem;
                        flex: 1;
                        display: flex;
                        flex-direction: column;
                        justify-content: space-between;

                        h3 {
                            color: #000;
                            font-weight: bold;
                            font-size: 17rem;
                        }

                        .author {
                            display: flex;
                            justify-content: space-between;
                            align-items: center;

                            span {
                                font-size: 12rem;
                                color: #666;
                            }
                        }

                        p {
                            width: 100%;
                            font-size: 12rem;
                            color: #666;

                            display: -webkit-box;
                            -webkit-box-orient: vertical; //从上到下垂直排列子元素(设置伸缩盒子的子元素的排列方式)
                            text-overflow: ellipsis; //溢出用省略号显示
                            overflow: hidden; //超出的文本隐藏
                            -webkit-line-clamp: 2; //表明3行文本显示省略号,这里要根据自身需求进行设置

                        }
                    }
                }
            }
        }

        .you-like {
            padding: 20rem 0 10rem;

            h3 {
                margin-bottom: 10rem;
            }
        }

        .bottom {

            p {
                text-align: center;
                padding-bottom: 10rem;
                color: #999
            }
        }
    }
}
</style>
